<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layui/css/eleTree.css" media="all">
    <style>

</style>
</head>
<body>
    <div class="eleTree ele1" lay-filter="data1"></div>
    <script src="../layui/layui.js"></script>
    <script>

        var $;
        var eleTree;
        layui.config({
            base: "../layui/lay/mymodules/"
        }).use(['jquery','eleTree'], function(){
           $ = layui.jquery;
           eleTree = layui.eleTree;
           var data=[
           {
            "label": "上级菜单",
            "spread": true,
            id:123,
            "children": [
            {
                "label": "管理员",
                "spread": true,
                id:12
            },
            {
                "label": "普通用户",
                "spread": true,
                id:13
            },
            {
                "label": "高级管理员",
                "spread": true,
                id:14
            }
            ]
        }
        ]
        eleTree.render({
            elem: '.ele1',
            // url: "/tree",
            // type: "post",
            data: data,
            showCheckbox: true,
            contextmenuList: ["copy","add","edit","remove"],
            accordion: true
        });
        
        eleTree.on("add(data1)",function(data) {
            console.log(data);
            // 若后台修改，则重新获取后台数据，然后重载
            // eleTree.reload(".ele1", {where: {data: JSON.stringify(data.data)}})
        })
        eleTree.on("checkbox(data1)",function(data) {
            console.log(data);
        })
        $(".layui-btn").on("click",function() {
            console.log(eleTree.checkedData(".ele1"));
        });
    });



</script>

</body>
</html>